<template>
	<view class="wanl-list">
		<!-- 导航条 -->
		<view class="cu-custom bg-white" style="padding: 20rpx 0;">
			<view class="cu-bar" style="padding-right: 0;">
				<view class="flex margin-left-sm">
					<view class="text-df flex" @tap="$wanlshop.to('/pages/page/city')">
						<text>{{common.addressText}}</text>
						<text style="margin-top: 10rpx;" class="wlIcon-jiang text-df margin-top"></text>
					</view>
				</view>
				<view class="search-form round">
					<text class="icon-sousuo iconfont text-bold text-green margin-left-bj margin-right-xs"></text>
					<input type="text" maxlength="12" confirm-type="search" placeholder-style="color: #ccc"
						placeholder="搜索" @confirm="onSearchInputConfirmed" @input="onSearchInputChanged" />
				</view>
			</view>
		</view>
		<view class="head" :class="{ headtop: scrollStype }">
			<view class="">
				<view class="bar">
					<view class="item" :class="{ current: filterIndex === 0 }" @tap="tabClick(0)">推荐</view>
					<view class="item" :class="{ current: filterIndex === 3 }" @tap="tabClick(3)">
						<text>距离</text>
						<view class="box">
							<text :class="{ active: priceOrder === 1 && filterIndex === 3 }"
								class="wlIcon-sheng"></text>
							<text :class="{ active: priceOrder === 2 && filterIndex === 3 }"
								class="wlIcon-jiang"></text>
						</view>
					</view>
					
					<view class="flex justify-between align-center">
						<view class="action flex justify-center align-center" @tap="editListstyle()" style="padding-right: 20rpx;border-right: 1px solid rgba(182,182,182,0.5);">
							<text class="wlIcon-listing-jf" v-if="liststyle == 'col-1-10'"></text>
							<text class="wlIcon-liebiao" v-else></text>
						</view>
						<view class="item margin-left" @tap="showDrawer()">
							筛选
							<text class="icon-shaixuan1 iconfont margin-left-xs" style="font-size: 22rpx;"></text>
						</view>
					</view>
					
				</view>
			</view>
		</view>

		<!-- 主体 -->
		<block v-if="goodsData.length > 0">
			<wanl-hospital @handleGoods="handleGoods" :dataList="goodsData" :dataStyle="liststyle" :dataType="goodsType" />
		</block>
		<wanl-empty :text="empty" v-if="goodsData.length == 0"/>
			
		<uni-load-more :status="status" :content-text="contentText" />
		<uni-drawer :visible="showRight" mode="right" @close="closeDrawer">
			<view class="drawer">
				<scroll-view scroll-y="true" class="scroll"
					:style="{ height: $wanlshop.wanlsys().windowHeight + 'px' }">
					
				</scroll-view>
				<view class="footer">
					<view>
						<button class="cu-btn bg-gradual-yellow round-left" @tap="onDrawerReset">重置</button>
						<button class="cu-btn bg-gradual-orange round-right" @tap="onDrawerTo">确定</button>
					</view>
				</view>
			</view>
		</uni-drawer>
		<view class="edgeInsetBottom"></view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex';
	export default {
		data() {
			return {
				WanlScroll: 0, //记录页面滚动
				scrollStype: false, //滚动状态
				filterIndex: 0, //
				priceOrder: 0, //1 价格从低到高 2价格从高到低
				liststyle: 'col-1-10', //列表样式
				goodsData: [], //商品列表数据
				showRight: false,
				category: '',
				goodsType: 'goods',
				empty: '没有找到任何宝贝',
				params: {
					search: '',
					sort: 'weigh',
					order: 'asc',
					page: 1,
					filter: {},
					op: {}
				},
				likeData: [],
				drawerType: {
					attribute: false,
					first: false,
					city: false
				},
				drawerData: {
					
				},
				drawerParams: {},
				reload: false, //判断是否上拉
				last_page: 0,
				status: 'loading',
				contentText: {
					contentdown: '',
					contentrefresh: '正在加载..',
					contentnomore: '没有更多数据了'
				},
				type:null
			};
		},
		computed: {
			...mapState(['common'])
		},
		async onLoad(option) {
			if(option.t) this.type = option.t;
			this.loadData();
		}, 
		// 监听上拉
		onPullDownRefresh() {
			this.params.page = 1;
			this.reload = true;
			this.loadData();
		},
		// 下拉刷新
		onReachBottom() {
			if (this.params.page >= this.last_page) {
				this.status = 'noMore';
			} else {
				this.reload = false;
				this.contentText.contentdown = '上拉显示更多';
				this.params.page = this.params.page + 1; //页码+1
				this.status = 'loading';
				this.loadData();
			}
		},
		// 监听滚动
		onPageScroll(object) {
			if (object.scrollTop > this.WanlScroll) {
				this.scrollStype = false;
			} else {
				this.scrollStype = true;
			}
			if (object.scrollTop < 0) {
				this.scrollStype = false;
			}
			this.WanlScroll = object.scrollTop;
		},
		// 监听返回
		onUnload() {
			this.type = null
		},
		methods: {
			handleGoods(item) {
				console.log(this.$wanlshop.prePage())
				if(this.type == 1) {
					this.$wanlshop.prePage().reloads(item);
					this.$wanlshop.back(1);
				} else {
					this.$wanlshop.to(`/pages/medicalcare/bookingsystem/hospital?id=${item.id}`);
				}
			},
			//异步加载商品列表
			async loadData() {
				await uni.request({
					url: `/addons/internethospital/api.hospital/lists`,
					data: {
						page: this.params.page,
						city_id: uni.getStorageSync('cityid')
					},
					success: res => {
						uni.stopPullDownRefresh();
						this.status = 'more';
						this.goodsData = this.reload ? res.data.data : this.goodsData.concat(res.data.data); //数据 追加
						this.params.page = res.data.current_page; //当前页码
						this.last_page = res.data.last_page; //总页码
					}
				});
			},
			editListstyle() {
				this.liststyle = this.liststyle == 'col-2-20'?'col-1-10':'col-2-20';
			},
			// 加载侧边栏数据
			async loadDrawer() {
				
			},
			//筛选点击
			tabClick(index) {
				if (this.filterIndex === index && index !== 3) {
					return;
				}
				this.filterIndex = index;
				
				
				this.status = 'loading';
				this.params.page = 1;
				this.reload = true;
				this.loadData();
				uni.pageScrollTo({
					duration: 300,
					scrollTop: 0
				});
			},
			// 打开抽屉，并且加载品牌和类目属性
			showDrawer() {
				this.showRight = true;
				if (!this.drawerType.first) {
					this.loadDrawer();
					this.drawerType.first = true;
				}
			},
			// 点击抽屉
			onDraver(e) {
				var index = e.currentTarget.dataset.attribute,
					key = e.currentTarget.dataset.key;
				
			},
			// 提交抽屉
			onDrawerTo() {
				
				this.status = 'loading';
				// 1.0.8升级
				this.goodsData = [];
				this.params.page = 1;
				this.reload = true;
				this.loadData();
				this.closeDrawer();
			},
			// 重置抽屉
			onDrawerReset() {
				this.drawerData.city.forEach(item => {
					item.choice = false;
				});
				this.drawerData.sameCity.choice = false;
				this.loadDrawer();
			},
			// 关闭抽屉
			closeDrawer() {
				this.showRight = false;
			},
			
			onSearchInputChanged(event) {

			},
			onSearchInputConfirmed(event) {
				let value = event.detail.value;
			}
		}
	};
</script>

<style lang="less">
	page {
		background: #EDEDED;
		height: 100%;
	}

	.cu-custom .search-form {
		border: 3rpx solid #4CBD66;
		background-color: #fff;
		margin: 0 20rpx;
	}
	.head .bar {
		background-color: #fff !important;
	}
</style>